import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:sudoku/page/RecordDetailPage.dart';
import 'package:sudoku/util/RecordModel.dart';
import 'package:sudoku/util/app_util.dart';
import 'package:sudoku/util/user_preferences.dart';
import 'package:sudoku/util/widget_util.dart';
import 'package:sudoku/widget/MenuButton.dart';

class RecordDialog extends StatefulWidget {
  const RecordDialog({Key? key}) : super(key: key);

  @override
  State<RecordDialog> createState() => _RecordDialogState();
}

class _RecordDialogState extends State<RecordDialog> {
  List records = [];

  @override
  void initState() {
    super.initState();
    loadData();
  }

  void loadData() {
    List list = UserPreferences.getHistoryRecord();
    List _records = [];
    for (Map<String, dynamic> map in list) {
      RecordModel model = RecordModel.fromJson(map);
      _records.add(model);
    }
    setState(() {
      records.assignAll(_records);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: Center(
        child: Container(
          height: Get.height * 0.8,
          width: Get.width * 0.8,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15),
              gradient: dialogGradient),
          child: Column(
            children: [
              const SizedBox(
                height: 15,
              ),
              const Text(
                "历史记录",
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                    fontFamily: "Han",
                    fontWeight: FontWeight.bold),
              ),
              const SizedBox(
                height: 15,
              ),
              Expanded(
                  child: records.isEmpty
                      ? const Center(
                          child: Text(
                            "你尚未有历史记录",
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 30,
                                fontFamily: "Han",
                                fontWeight: FontWeight.bold),
                          ),
                        )
                      : ListView(
                          padding: const EdgeInsets.symmetric(horizontal: 10),
                          children: records.map((e) => _itemWidget(e)).toList(),
                        )),
              const SizedBox(
                height: 15,
              ),
              MenuButton(
                  onPressed: () {
                    Get.back();
                  },
                  title: "关闭"),
              const SizedBox(
                height: 15,
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _itemWidget(RecordModel model) {
    return GestureDetector(
      onTap: () {
        Get.to(() => RecordDetailPage(model));
      },
      child: Container(
        height: 50,
        padding: const EdgeInsets.symmetric(horizontal: 10),
        margin: const EdgeInsets.symmetric(vertical: 5),
        alignment: Alignment.centerLeft,
        decoration: BoxDecoration(
            color: const Color(0xFF178BC0),
            borderRadius: BorderRadius.circular(15)),
        child: Row(
          children: [
            Text(
              model.type!,
              style: const TextStyle(
                  color: Colors.white, fontFamily: "Han", fontSize: 17),
            ),
            Expanded(
                child: Center(
              child: Text(
                "用时 ${durationStr(model.duration ?? 0)}",
                style: const TextStyle(
                    color: Colors.white, fontFamily: "Han", fontSize: 17),
              ),
            )),
            Text(
              timeStr(model.time ?? 0),
              style: const TextStyle(
                  color: Colors.white, fontFamily: "Han", fontSize: 13),
            )
          ],
        ),
      ),
    );
  }
}

void showRecordDialog() {
  showDialog(
      context: Get.context!,
      builder: (context) {
        return const RecordDialog();
      });
}
